import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, ScrollView, TextInput, Pressable } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";
import { categories, getQuestionsByCategory } from "@/mocks/questions";
import CategoryCard from "@/components/CategoryCard";
import { useTheme } from "@/hooks/useTheme";
import ThemeToggle from "@/components/ThemeToggle";

export default function PracticeScreen() {
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryCounts, setCategoryCounts] = useState<Record<string, number>>({});
  const { colors } = useTheme();
  
  // 加载每个分类的问题数量
  useEffect(() => {
    const loadCategoryCounts = async () => {
      const counts: Record<string, number> = {};
      
      // 为每个分类异步获取问题数量
      for (const category of categories) {
        const questions = await getQuestionsByCategory(category.id);
        counts[category.id] = questions.length;
      }
      
      setCategoryCounts(counts);
    };
    
    loadCategoryCounts();
  }, []);

  const filteredCategories = categories.filter((category) =>
    category.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
  
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["bottom"]}>
      <View style={styles.header}>
        <View style={styles.titleContainer}>
          <Text style={[styles.title, { color: colors.text }]}>练习题目</Text>
          <ThemeToggle compact />
        </View>
        <Text style={[styles.subtitle, { color: colors.subtext }]}>
          选择一个类别开始练习
        </Text>
      </View>
      <View style={styles.searchContainer}>
        <View style={[styles.searchInputContainer, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <Ionicons
            name="search"
            size={20}
            color={colors.subtext}
            style={styles.searchIcon}
          />
          <TextInput
            style={[styles.searchInput, { color: colors.text }]}
            placeholder="搜索类别..."
            placeholderTextColor={colors.subtext}
            value={searchQuery}
            onChangeText={setSearchQuery}
          />
        </View>
        <View style={[styles.filterButton, { backgroundColor: "rgba(99, 102, 241, 0.1)" }]}>
          <Ionicons name="options-outline" size={20} color={colors.primary} />
        </View>
      </View>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {filteredCategories.map((category) => (
          <CategoryCard
            key={category.id}
            id={category.id}
            name={category.name}
            count={categoryCounts[category.id] || 0}
          />
        ))}
        <View style={styles.footer} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  header: {
    marginBottom: 24,
  },
  titleContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
  },
  subtitle: {
    fontSize: 16,
  },
  searchContainer: {
    flexDirection: "row",
    marginBottom: 24,
    alignItems: "center",
    gap: 12,
  },
  searchInputContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    borderRadius: 8,
    paddingHorizontal: 12,
    borderWidth: 1,
  },
  searchIcon: {
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    height: 44,
    fontSize: 16,
  },
  filterButton: {
    width: 44,
    height: 44,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  scrollContent: {
    paddingBottom: 20,
  },
  footer: {
    height: 20,
  },
});
